<template>
  <div class="WhiteList">
    
    <div>
      <div>
        <p>物品名称</p>
        <el-input v-model="from.name" />
      </div>
      <div>
        <p>售价</p>
        <el-input v-model="from.firstPrice" />-----
        <el-input v-model="from.lastPrice" />
      </div>
      <div>
        <el-button @click="search">搜索</el-button>
        <el-button @click="insert" type="primary">添加</el-button>
        <el-button type="success" @click="exportadd">导出</el-button>
      </div>
    </div>

    <el-tabs v-model="from.active" @tab-click="tabChange">
      <el-tab-pane label="全部" name="3"></el-tab-pane>
      <el-tab-pane label="使用中" name="1"></el-tab-pane>
      <el-tab-pane label="已删除" name="2"></el-tab-pane>
      <el-table  :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="物品id" width="120"></el-table-column>
        <el-table-column prop="type" label="物品类型" width="120"></el-table-column>
        <el-table-column prop="name" label="物品名称" width="120"></el-table-column>
        <el-table-column prop="marketHashName" label="market_hash_name"></el-table-column>
        <el-table-column prop="img" label="图片预览">
          <template slot-scope="scope">
             <img class="imgg" :src="scope.row.img" style="height:57px;">
          </template>
        </el-table-column>
        <el-table-column prop="quality" label="品质" width="120"></el-table-column>
        <el-table-column prop="price" label="网站售价" width="120"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.state==1">
              <el-button type="text" size="small" @click="handleClick(scope)">编辑</el-button>
              <el-button type="text" size="small" @click="deleteClick(scope)">删除</el-button>
            </div>
           <div v-else>
             <el-button style="color:red;" type="text"  size="small" >已删除</el-button>
           </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="currentChange"
        :current-page.sync="page"
        background
        layout="prev, pager, next"
        :total="pages*10"
      ></el-pagination>
    </el-tabs>
  </div>
</template>
<script>
import axios from "../../../utils/publicApi";
import BasicsApi from '../../../api/Basicpath'
import { Loading } from 'element-ui';
export default {
  data() {
    return {
      from: {
        name: "",
        firstPrice: "",
        lastPrice: "",
        currentPage: 1,
        pageSize: 2,
        isDelete: '',
        active: "3",
      },
      from1:{
        name: "",
        firstPrice: "",
        lastPrice: "",
        currentPage: 1,
        pageSize: 2,
        isDelete: '',
        active: "3",
      },
      tableData: [],
      pages: "",
      page: 1,
      sel:'',
      sell:'',
    };
  },
 async created() {
     var list = await axios.getAll('/gamemall/droplist/quality?id=1')
     this.sel = list.obj
      var list1 = await  axios.getAll('/gamemall/droplist/type')
      this.sell = list1.obj
      var obj =await axios.getAll(`/gamemall/open/list`,{currentPage:1,pageSize:2})
      this.common(obj);
  },
  mounted(){
    
  },
  methods: {
    handleClick(tab) {
      this.$router.push({
        path: `WhiteList/BoxEditing`
      });
      this.sel.map((item)=>{
        if(item.name == tab.row.quality){
          tab.row.quality = item.id
        }
      })
      this.sell.map((item)=>{
        if(item.name == tab.row.type){
          tab.row.type = item.id
        }
      })
      this.$store.commit('increment',tab.row)
    },
    async search() {
      var options = false
      Loading.service(options);
      this.from.isDelete = this.from1.isDelete
      this.from1 = JSON.parse(JSON.stringify(this.from))
      var list = await axios.getSearch('/gamemall/open/list',this.from);
      this.common(list,options);
    },
    async tabChange() {
      var options = false
      Loading.service(options);
      this.from1.active = this.from.active
      var list = await axios.getTabChange('/gamemall/open/list',this.from1);
        this.common(list,options);
    },
    async currentChange(e) {
     var options = false
     Loading.service(options);
      this.from.currentPage = e;
      this.from1.currentPage = e;
      var list = await axios.getCurrentChange('/gamemall/open/list',this.from1);
        this.common(list,options);
    },
    common(parms,options) {
      parms.obj.list.map((item)=>{
        this.sel.map((item1)=>{
          if(item.quality == item1.id){
            item.quality = item1.name
          }
          this.sell.map((item2)=>{
            if(item.type == item2.id){
              item.type = item2.name
            }
          })
        })
      })
      this.tableData = parms.obj.list;
      this.pages = parms.obj.pages;
      let loadingInstance = Loading.service(options);
          this.$nextTick(() => { 
            loadingInstance.close();
          });
    },
    exportadd(){
      var {name,firstPrice,lastPrice,isDelete} = this.from1
      this.$axios.get(`${BasicsApi}/gamemall/open/export`,this.from1).then((res)=>{
            window.location= `${BasicsApi}/gamemall/open/export?name=${name}&firstPrice=${firstPrice}&lastPrice=${lastPrice}&isDelete=${isDelete}`
                  this.$message({
                    showClose: true,
                    message: '导出成功',
                    type: 'success'
                    });
      })
    },
    insert(){
      this.$router.push({
        path: `WhiteList/BoxEditing`
      });
      this.$store.commit('incrementAdd')
    },
    deleteClick(tab){
      tab.row.state = 0
      this.$axios.post(`${BasicsApi}/gamemall/open/update`,tab.row).then((res)=>{
      })
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../../style/mixin.less";
.WhiteList {
   .el-table__row{
     height: 100px;
     img{
       height: 57px!important;
     }
   }
  .imgg{
    height: 57px;
    line-height: 57px;
  }
  .detil{
    color: #ccc;
    font-size: 12px;
  }
  > div:nth-of-type(1) {
    span {
      width: 50px;
      line-height: 30px;
      display: inline-block;
    }
    .el-button {
      width: 67px !important;
    }
    > div {
      width: 33%;
      display: inline-block;
    }
    > div:nth-of-type(2) .el-input {
      text-align: center;
      width: 100px !important;
      display: inline-block;
    }
  }
}
</style>
